<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>jmpress.js | a jQuery plugin to build a website on the infinite canvas</title>

	<meta name="description" content="jmpress.js is a jQuery plugin to build a website on the infinite canvas">
	<meta name="author" content="Kyle Robinson Young @shama & Tobias Koppers @sokra" />
	<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta http-equiv="expires" content="0">
	<meta property="og:title" content="jmpress.js - a jQuery plugin to build a website on the infinite canvas" />
	<meta property="og:site_name" content="jmpress.js" />
	<meta property="og:image" content="http://dontkry.com/img/jmpress/jmpress.png" />

	<!-- Google Fonts -->
	<link href='http://fonts.googleapis.com/css?family=Quicksand|Headland+One' rel='stylesheet' type='text/css'>

	<!-- demo style and animations -->
	<link href="dist/demo.css" rel="stylesheet" type="text/css" />

	<!-- jQuery and jmpress.js -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="dist/jmpress.all.min.js"></script>
</head>
<body>
	<!-- NAVIGATION -->
	<ul class="nav">
		<li><a href="#home" class="go">HOME</a>&middot;
		<li><a href="http://jmpressjs.github.com/docs/" target="_blank">DOCS</a>&middot;
		<li><a href="#/about">ABOUT</a>&middot;
		<li><a href="#/features">FEATURES</a>&middot;
		<li><a href="#/examples">EXAMPLES</a>&nbsp;-&nbsp;
		<li><a href="#prev" class="go">PREV</a>&middot;
		<li><a href="#next" class="go">NEXT</a>
	</ul>
	<div class="hint">YOU CAN USE YOUR ARROW KEYS OR SPACEBAR TO NAVIGATE</div>

	<article class="jmpress">

		<!-- HOME -->
		<section id="home">
			<ul class="title"><li>j<li>m<li>p<li>r<li>e<li>s<li>s<li>.<li>j<li>s</ul>
			<div class="credit">
				by <a href="http://github.com/sokra">sokra</a> &amp; <a href="http://github.com/shama">shama</a>
			</div>
			<div class="tagline">build a website on the infinite canvas</div>
			<ul class="home-nav">
				<li><a href="#/about">about</a>
				<li><a href="http://jmpressjs.github.com/customize/" target="_blank">download</a>
				<li><a href="http://jmpressjs.github.com/docs/" target="_blank">documentation</a>
				<li><a href="#/features">features</a>
				<li><a href="#/examples">examples</a>
				<li class="navsep">I AM A
				<li class="small"><a href="#/presenter">presenter</a>
				<li class="small"><a href="#/developer">website developer</a>
			</ul>
			<div class="ocean"></div>
			<div class="ocean-floor"></div>
		</section>

		<!-- ABOUT -->
		<section id="about" data-x="-100" data-y="400">
			<h4>I am</h4>
			<h3>pure <code>&lt;html&gt;</code>, <code>.css {}</code> and <code>function javascript() {}</code></h3>
			<h4 class="offset3">and use CSS3 transitions and transformations.</h4>
			<section id="pan" data-y="200" data-x="-400">I can pan,</section>
			<section id="rotate" data-y="700" data-x="-300" data-rotate="90">rotate</section>
			<section id="scale" data-y="500" data-x="-100" data-rotate="180" data-scale=".3">
				and scale
				<h4>between elements on an infinite canvas.</h4>
			</section>

			<section id="support" data-y="800" data-rotate="180">
				<h4>I currently work</h4>
				<h3>with most modern web browsers</h3>
				<h4 class="offset1">and fallback to simpler transitions with unsupported browsers.</h4>
				<ul class="browsers">
					<li class="yes">yes
					<li class="yes">yes
					<li class="partly">partly
					<li class="yes">yes
					<li class="partly">partly
				</ul>
			</section>

			<section id="impress" data-y="1115">
				<h4>I started as a</h4>
				<h3>a jQuery port of <a href="http://bartaz.github.com/impress.js" target="_blank">impress.js</a></h3>
				<h4 class="offset2">but I have become much, much more.</h4>
			</section>
		</section>

		<!-- FEATURES -->
		<section id="features" data-x="0" data-y="-800" data-scale="1.4" data-rotate="90">
			<h4>here are</h4>
			<h3>some of my features</h3>
			<ul class="features">
				<li><a href="#/animations">custom animations</a>
				<li><a href="#/nested">nested steps</a>
				<li><a href="#/printable">printable</a>
				<li><a href="#/ajax">ajax loaded steps</a>
				<li><a href="#/notes">presenter notes</a>
				<li><a href="#/templating">templating</a>
				<li><a href="#/routing">routing</a>
				<li><a href="#/controls">keyboard controls</a>
				<li><a href="#/zoom">zoomable steps</a>
				<li><a href="#/plugins">plugins</a>
			</ul>
		</section>

		<!-- PRESENTER -->
		<section id="presenter" data-x="1000" data-y="500" data-template="stepper">
			<h4>get started quickly</h4>
			<h3>by using one of our pre-made presentation templates</h3>
			<a href="examples/simple/" target="_blank">Simple</a>, <a href="examples/jqueryui/" target="_blank">jQuery UI</a>

			<h5 class="offset6 span4"><br/><br/>Don't know HTML or CSS? Beta drag and drop presentation builders are being developed in the community: <a href="http://tantaman.github.com/Strut/" target="_blank">Strut</a> &amp; <a href="http://www.hsivaram.com/impressionist/alpha3/app.html" target="_blank">Impressionist</a>.</h5>

			<section id="notes">
				<h4>press <code>p</code></h4>
				<h3>to open presenter notes</h3>
				<h4 class="offset1 span6">move your notes off the main screen and have them follow along with your main presentation.</h4>
			</section>

			<section id="printable">
				<h4>press <code>esc</code></h4>
				<h3>to de-initialize jmpress.js</h3>
				<h4 class="offset1">allowing your presentation to be printed.</h4>
			</section>

			<section id="zoom" data-view-port-zoomable="10" data-view-port-max-scale="4">
				<h4>press <code>+</code> and <code>-</code></h4>
				<h3>to zoom in and out of a step</h3>
				<h4 class="offset1">or use your mouse wheel.</h4>
			</section>

			<section id="animations" data-y="1200">
				<h4>custom animations</h4>
				<h3>using the <code>data-jmpress</code> attribute</h3>
				<h5 class="pull-right span4">press the next arrow key or spacebar to view...</h5>
				<ul>
					<li data-jmpress="fade"><code>&lt;div data-jmpress="fade"/&gt;</code></li>
					<li data-jmpress="drive-right after 500ms"><code>&lt;div data-jmpress="drive-right after 500ms"/&gt;</code></li>
					<li data-jmpress="drive-up after 500ms"><code>&lt;div data-jmpress="drive-up after 500ms"/&gt;</code></li>
					<li data-jmpress="warp-right after 500ms"><code>&lt;div data-jmpress="warp-right after 500ms"/&gt;</code></li>
					<li data-jmpress="fade after 500ms"><code>&lt;div data-jmpress="fade after 500ms"/&gt;</code></li>
					<li data-jmpress="drive-right after 500ms"><code>&lt;div data-jmpress="drive-right after 500ms"/&gt;</code></li>
					<li data-jmpress="fade after 500ms" style="list-style:none;"><a href="http://jmpressjs.github.com/docs/animation.html" target="_blank" class="pull-right">read more about animations</a></li>
				</ul>
			</section>

		</section>

		<!-- DEVELOPER -->
		<section id="developer" data-x="2000" data-y="-100" data-template="stepper">
			<h4>i am</h4>
			<h3>developer friendly</h3>
			<h4 class="offset1">and have a great <a href="http://jmpressjs.github.com/docs/plugin.html" target="_blank">plugin interface</a> to extend from.</h4>

			<section id="templating">
				<h4>want cleaner HTML?</h4>
				<h3 class="offset1">use <a href="http://jmpressjs.github.com/docs/templates.html" target="_blank">templates</a></h3>
				<h4 class="offset0">set the attributes of your elements with javascript:</h4>
				<pre class="span5 pull-left">$.jmpress('template', 'arraytemplate', {
    x: 100, y: 100, scale: 2,
    children: [
        { x: 0, y: 150, scale: 0.2 },
        { x: 0, y: 450, scale: 0.3 }
    ]
});</pre>
				<pre class="span5 pull-right">// or even better, use a function
$.jmpress('template', 'functiontemplate', {
    x: 100, y: 100, scale: 2,
    children: function(i) {
        return { x: i * 200 };
    }
});</pre>
				<h4>Then use on your parent element: <code>&lt;div data-template="functiontemplate"/&gt;</code></h4>
			</section>

			<section id="nested">
				<h4>easily</h4>
				<h3>nest or embed jmpress</h3>
				<h4 class="offset1">on a page or even within another jmpress</h4>

				<!-- NESTED JMPRESS -->
				<div class="nested-jmpress">
					<div class="offset1 nested-step" data-duration="-1">
						<h4>jmpress can be used for more than</h4>
						<h3 class="offset1">presentations</h3>
						<h4 class="offset2"><a href="#next" class="nested-go">let's go &gt;</a></h4>
					</div>
					<div class="nested-step" data-x="1000" data-rotate-y="90">
						<h4>embed your presentation</h4>
						<h3 class="offset1">into your blog</h3>
					</div>
					<div class="nested-step" data-y="-1000" data-rotate-x="90" data-rotate-z="-90">
						<h4>create a fun slideshow</h4>
						<h3 class="offset1">on your website</h3>
						<h4 class="offset2">like <a href="http://tympanus.net/Tutorials/SlideshowJmpress/" target="_blank">this one on codrops</a></h4>
					</div>
					<div class="nested-step" data-y="1000" data-x="1000" data-rotate-x="90">
						<h4>combine with the duration-plugin</h4>
						<h3 class="offset1">to auto advance your slides</h3>
					</div>
					<div class="progressbar"><div class="progressbar-value"></div></div>
				</div>

			</section>

			<section id="ajax">
				<h4>load</h4>
				<h3>with ajax</h3>
				<h4>Just set the <code>href</code> or <code>data-src</code> attributes.</h4>
			</section>

			<section id="controls">
				<h4>customize</h4>
				<h3>all the controls</h3>
				<h4 class="offset1">Map any key to an action in jmpress.js, <a href="http://jmpressjs.github.com/docs/keyboard.html" target="_blank">read more</a>.</h4>
				<pre class="offset1 span7 pull-left">// bind the 'o' key to select a step with the id 'overview'
$('#jmpress').jmpress({
    keyboard: {
        keys: {
            79: ['select', '#overview']
        }
    }
});</pre>
			</section>

			<section id="routing">
				<h4>change the flow with</h4>
				<h3 class="offset1"><a href="http://jmpressjs.github.com/docs/ways.html" target="_blank">routing</a></h3>
				<pre class="offset1 span5">$('#jmpress').jmpress('route', [
    '#one', '#three', '#two', '#four'
]);</pre>
				<h4 class="offset4"><a href="http://jmpressjs.github.com/docs/ways.html" target="_blank">read more about routing</a></h4>
			</section>

			<section id="secondary">
				<h4>apply</h4>
				<h3><a href="http://jmpressjs.github.com/docs/pluginsecondary.html" target="_blank">secondary animations</a></h3>
				<pre class="offset1 span5">$.jmpress('apply', '#secondary', {
    secondary: {
        rotate: { z: 20, x: 20, y:20 },
        '': 'self'
    }
});</pre>
				<h4 class="offset4"><a href="http://jmpressjs.github.com/docs/pluginsecondary.html" target="_blank">read more about the secondard plugin</a></h4>
			</section>

		</section>

		<!-- EXAMPLES -->
		<section id="examples" data-x="-500" data-y="-500" data-scale="1">
			<h2>examples</h2>
			<ul>
				<li><h3>basic</h3>
				<ul>
					<li><a href="examples/impress/" target="_blank">impress.js</a>
					<li><a href="examples/simple/" target="_blank">simple</a>
					<li><a href="examples/zoomable/" target="_blank">zoomable</a>
					<li><a href="examples/animation/" target="_blank">animation</a>
					<li><a href="examples/ajax/" target="_blank">ajax</a>
				</ul></li>
				<li><h3>advanced</h3>
				<ul>
					<li><a href="examples/automatic-layout/" target="_blank">automatic layout</a>
					<li><a href="examples/cube/" target="_blank">cube</a>
					<li><a href="examples/form-dynamic/" target="_blank">form dynamic</a>
					<li><a href="examples/tab-control/" target="_blank">tab control</a>
					<li><a href="examples/vacation/" target="_blank">vacation</a>
				</ul></li>
				<li><h3>presentation templates</h3>
				<ul>
					<li><a href="examples/jqueryui/" target="_blank">jQuery UI</a>
				</ul></li>
			</ul>
			<h4>and more <a href="https://github.com/jmpressjs/jmpress.js/wiki/Examples" target="_blank">community examples here</a>.</h4>
		</section>

	</article>

<script type="text/javascript">

/* =============================================================================
   PLEASE NOTE! In order to showcase all the features in one demo, a lot more
   code is used than you'll likely need. Check out the examples for real world
   usage of jmpress.js.
   ========================================================================== */

$.jmpress('register', 'demo', function() {
	var jmpress = this;

	// template - step down/up and right/left
	$.jmpress('template', 'stepper', {
		children: function(i, child, children) {
			if ($(child).parent().attr('id') === 'developer') {
				return {
					y: -(i+1)*300,
					x: ((i-1)%2)*100
				};
			}
			return {
				y: (i+1)*250,
				x: (i%2)*100
			};
		}
	});

	// apply secondary animation
	$.jmpress('apply', '#secondary', {
		secondary: {
			rotate: { z: 20, x: 20, y:20 },
			'': 'self'
		}
	});

	// on each step hide/show nav
	var setActive = function(step) {
		if ($(step).attr('id') === 'home') {
			$('.nav').fadeOut();
			$('.hint').stop(true, true).delay(3000).fadeIn();
		} else {
			$('.nav').fadeIn();
			$('.hint').stop(true, true).fadeOut();
		}
	};

	// our main configuration
	var config = {
		stepSelector: 'section',
		viewPort: {
			width: 1300,
			maxScale: 1
		},
		presentationMode: {
			notesUrl: 'index.notes.html'
		},
		setActive: setActive
	};

	// START JMPRESS and enable esc key de-init toggle
	$(this).jmpress('toggle', 27, config, true);

	// start nested jmpress
	$('.nested-jmpress').jmpress({
		viewPort: { height: 150, width: 700, maxScale: 1 },
		duration: { defaultValue: 3500, barSelector: '.progressbar-value' },
		stepSelector: '.nested-step',
		hash: { use: false },
		fullscreen: false,
		presentationMode: { use: false }
	});

	// handle nested internal nav links
	$('.nested-go').click(function() {
		$('.nested-jmpress').jmpress($(this).attr('href').slice(1));
		//_gaq.push(['_trackEvent', 'Feature', 'NestedJmpress', "start"]);
		return false;
	});

	// handle internal nav links
	$('.go').click(function(e) {
		e.preventDefault();
		$(jmpress).jmpress($(this).attr('href').slice(1));
	});
});

// start the demo!
$('.jmpress').jmpress('demo');

</script>

</body>
</html>
